import MonacoEditor, {OnMount} from "@monaco-editor/react";
import {debounceHandle} from "../../../../utils/throttle.ts";


const DataEdit = (props:any) => {
    const {value, onChange} = props
    const handleEditorMount: OnMount = (editor, monaco) => {
        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
            editor.getAction('editor.action.formatDocument')?.run()
        });
    }
    const changeHandler = (value: string | undefined) => {
        debounceHandle(()=>{
            onChange(JSON.parse(value!))
        },1000)
    }

    return (
        <div className={'h-[300px] w-full'}>
            <MonacoEditor
                height={'100%'}
                path='formItem.json'
                language='json'
                onMount={handleEditorMount}
                onChange={changeHandler}
                value={JSON.stringify(value, null, 2)}
                options={
                    {
                        fontSize: 14,
                        scrollBeyondLastLine: false,
                        minimap: {
                            enabled: false,
                        },
                        scrollbar: {
                            verticalScrollbarSize: 3,
                            horizontalScrollbarSize: 3,
                        },
                    }
                }
            />
        </div>
    );
};

export default DataEdit;